<template>
  <div class="p-2 w-full bg-white relative min-h-screen">
    <div :class="{hidden: isPublic}" class="my-2 p-4 flex justify-between items-center bg-gray-50">
      <div class="text-2xl font-bold text-gray-800">{{ t('电池护照详情') }}</div>
      <div class="flex gap-2">
        <el-button v-if="passportData?.documentStatus==='DRAFT'" type="primary" @click="publish">{{ t('发布') }}</el-button>
        <el-button type="primary" @click="goBack">{{ t('返回') }}</el-button>
      </div>
    </div>

    <div v-if="!loading" class="my-2 p-4 md:flex justify-between gap-8 bg-gray-50">
      <div class="min-w-0 flex flex-col flex-[1_0_0] justify-around">
        <div>
          <div class="flex gap-8 text-sm text-gray-500">
            {{ t('电池护照ID') }}
            <el-tag type="success">{{ passportData.documentStatus }}</el-tag>
          </div>
          <div class="break-words">
            #{{ passportData.generalInfo?.batteryPassportIdentifier }}
          </div>
        </div>
        <div class="flex items-center gap-4">
          <div class="text-sm font-medium text-gray-900">
            <div class="flex gap-8 text-sm text-gray-500"> 产品ID</div>
            {{ passportData.generalInfo.manufacturerInformation?.identifier }}
          </div>
          <img alt="" class="w-16 h-16 object-contain" src="@/assets/images/CN.png"/>
        </div>
        <div class="mt-2 flex justify-between gap-8">
            <span class="text-xs text-gray-400">
              {{ t('最后更新') }} {{ formatDate(passportData.updateTime, "YYYY-MM") }}
            </span>
            <span class="text-xs text-gray-400">
              {{ t('已创建') }} {{ formatDate(passportData.generalInfo?.manufacturingDate, "YYYY-MM") }}
            </span>
        </div>
      </div>
      <div class="min-w-0 flex flex-col flex-[1_0_0] items-center gap-4">
        <img alt="电池图片"
             class="battery-image w-[10rem] h-[10rem] object-contain border border-gray-200 rounded-lg bg-gray-50"
             src="@/assets/images/battery.png">
        <div class="text-xs text-gray-400 text-center">{{ t('此图片仅供展示使用') }}</div>
      </div>
      <div :class="{hidden: isPublic}" class="min-w-0 flex flex-col flex-[1_0_0] justify-between items-center">
        <QrcodeVue :size="120" :value="qrValue" background="#ffffff"
                   class="m-2 border border-[#a53b27] rounded-lg p-3 bg-white" foreground="#000000"
                   level="H"/>
        <div class="mb-2 text-xs text-gray-500 break-words">
          #{{passportData.generalInfo?.batteryPassportIdentifier}}
        </div>
        <div class="flex flex-col gap-2 items-center">
          <div class="flex items-center gap-2 cursor-pointer hover:text-blue-500">
            <img alt="" class="w-4 h-4" src="@/assets/images/print.png">
            <span class="text-sm text-gray-500">{{ t('打印') }}</span>
          </div>
          <div class="flex items-center gap-2 cursor-pointer hover:text-blue-500" @click="goTo(qrValue2)">
            <img alt="" class="w-4 h-4" src="@/assets/images/view.png">
            <span class="text-sm text-gray-500">{{ t('查看') }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <el-tabs v-if="!loading" class="my-2 p-4 w-full" stretch>
      <!-- 通用信息 -->
      <el-tab-pane class="space-y-6" :label="t('通用信息')">
        <div class="space-y-4">
          <!-- 基本信息卡片 -->
          <InfoCard :title="t('基本信息')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <InfoItem :value="passportData.generalInfo?.batteryPassportIdentifier" :label="t('电池护照标识符')"/>
              <InfoItem :value="formatDate(passportData.generalInfo?.manufacturingDate, 'YYYY-MM')" :label="t('生产日期')"/>
              <InfoItem :value="formatDate(passportData.generalInfo?.puttingIntoService, 'YYYY-MM')" :label="t('投入使用日期')"/>
              <InfoItem :value="passportData.generalInfo?.warrentyPeriod" :label="t('保修期限')"/>
            </div>
          </InfoCard>

          <!-- 分类信息卡片 -->
          <InfoCard :title="t('分类信息')">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
              <InfoItem :value="getLabelByValue(BatteryCategory, passportData.generalInfo?.batteryCategory)"
                        :label="t('类别')"/>
              <InfoItem :value="getLabelByValue(BatteryStatus, passportData.generalInfo?.batteryStatus)"
                        :label="t('状态')"/>
              <InfoItem :value="passportData.generalInfo?.batteryMass" :unit="`kg`" :label="t('重量')"/>
            </div>
          </InfoCard>

          <!-- 制造商信息卡片 -->
          <InfoCard :title="t('制造商信息')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <InfoItem :value="passportData.generalInfo?.manufacturerInformation?.contactName"
                        :label="t('制造商名称')"/>
              <InfoItem :value="passportData.generalInfo?.manufacturerInformation?.identifier"
                        :label="t('制造商标识符')"/>
              <InfoItem :value="passportData.generalInfo?.manufacturerInformation?.emailAddress"
                        :label="t('制造商邮箱')"/>
              <InfoItem :value="passportData.generalInfo?.manufacturerInformation?.webAddress"
                        :label="t('制造商网站')"/>
            </div>
          </InfoCard>

          <!-- 生产地点信息卡片 -->
          <InfoCard :title="t('生产地点信息')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
              <InfoItem :value="passportData.generalInfo?.manufacturingPlace?.streetAddress" :label="t('街道地址')"/>
              <InfoItem :value="passportData.generalInfo?.manufacturingPlace?.postalCode" :label="t('邮政编码')"/>
              <InfoItem :value="passportData.generalInfo?.manufacturingPlace?.addressCountry" :label="t('国家')"/>
            </div>
          </InfoCard>

          <!-- 运营商信息卡片 -->
          <InfoCard :title="t('运营商信息')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <InfoItem :value="passportData.generalInfo?.operatorInformation?.contactName" :label="t('运营商名称')"/>
              <InfoItem :value="passportData.generalInfo?.operatorInformation?.identifier" :label="t('运营商标识符')"/>
              <InfoItem :value="passportData.generalInfo?.operatorInformation?.emailAddress" :label="t('运营商邮箱')"/>
              <InfoItem :value="passportData.generalInfo?.operatorInformation?.webAddress" :label="t('运营商网站')"/>
            </div>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 材料组成 -->
      <el-tab-pane class="space-y-6" :label="t('材料组成')">
        <div class="space-y-6">
          <!-- 电池化学卡片 -->
          <InfoCard :title="t('电池化学')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :value="passportData.materialComposition?.batteryChemistry?.shortName" :label="t('简称')"/>
              <InfoItem :value="passportData.materialComposition?.batteryChemistry?.clearName" :label="t('全称')"/>
            </div>
          </InfoCard>

          <!-- 关键材料表格 -->
          <InfoCard :title="t('关键材料')">
            <el-table
                :data="passportData.materialComposition?.batteryMaterials"
                :header-cell-style="{ backgroundColor: '#f9fafb', color: '#374151' }"
                class="w-full"
            >
              <el-table-column :label="t('材料名称')" min-width="150" prop="batteryMaterialName"/>
              <el-table-column :label="t('CAS编号')" min-width="120" prop="batteryMaterialIdentifier"/>
              <el-table-column :label="t('质量(kg)')" prop="batteryMaterialMass" width="100"/>
              <el-table-column :label="t('组件位置')" min-width="120">
                <template #default="{row}">
                  <div>
                    <div>{{ row.batteryMaterialLocation?.componentName }}</div>
                    <div v-if="row.batteryMaterialLocation?.componentId" class="text-xs text-gray-500">
                      ID: {{ row.batteryMaterialLocation.componentId }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="t('关键材料')" width="100">
                <template #default="{row}">
                  <el-tag :type="row.isCriticalRawMaterial ? 'danger' : 'success'" size="small">
                    {{ row.isCriticalRawMaterial ? t('是') : t('否') }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </InfoCard>

          <!-- 有害物质表格 -->
          <InfoCard :title="t('有害物质')">
            <el-table
                :data="passportData.materialComposition?.hazardousSubstances"
                :header-cell-style="{ backgroundColor: '#f9fafb', color: '#374151' }"
                class="w-full"
            >
              <el-table-column :label="t('物质名称')" min-width="150" prop="hazardousSubstanceName"/>
              <el-table-column :label="t('CAS编号')" min-width="120" prop="hazardousSubstanceIdentifier"/>
              <el-table-column :label="t('危险类别')" min-width="120" prop="hazardousSubstanceClass"/>
              <el-table-column :label="t('浓度(%)')" prop="hazardousSubstanceConcentration" width="100"/>
              <el-table-column :label="t('位置')" min-width="120">
                <template #default="{row}">
                  <div>
                    <div>{{ row.hazardousSubstanceLocation?.componentName }}</div>
                    <div v-if="row.hazardousSubstanceLocation?.componentId" class="text-xs text-gray-500">
                      ID: {{ row.hazardousSubstanceLocation.componentId }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="t('影响声明')" min-width="200">
                <template #default="{row}">
                  <div class="text-sm">
                    {{
                      Array.isArray(row.hazardousSubstanceImpact) ? row.hazardousSubstanceImpact.join(', ') : row.hazardousSubstanceImpact
                    }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 性能数据 -->
      <el-tab-pane class="space-y-6" :label="t('性能数据')">
        <div class="space-y-6">
          <!-- 技术规格卡片 -->
          <InfoCard :title="t('技术规格')">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.ratedEnergy"
                  :unit="`kWh`"
                  :label="t('额定能量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.ratedCapacity"
                  :unit="`Ah`"
                  :label="t('额定容量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.nominalVoltage"
                  :unit="`V`"
                  :label="t('额定电压')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.maximumVoltage"
                  :unit="`V`"
                  :label="t('最大电压')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.minimumVoltage"
                  :unit="`V`"
                  :label="t('最小电压')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.ratedMaximumPower"
                  :unit="`W`"
                  :label="t('额定最大功率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.roundtripEfficiency"
                  :unit="`%`"
                  :label="t('往返效率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.powerCapabilityRatio"
                  :label="t('功率能力比率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.expectedLifetime"
                  :unit="`${t('年')}`"
                  :label="t('预期寿命')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.expectedNumberOfCycles"
                  :label="t('预期循环次数')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.capacityThresholdForExhaustion"
                  :unit="`%`"
                  :label="t('容量耗尽阈值')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.temperatureRangeIdleState"
                  :unit="`°C`"
                  :label="t('空闲状态温度范围')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.initialSelfDischarge"
                  :unit="`%/${t('天')}`"
                  :label="t('初始自放电率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.crate"
                  :label="t('C率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryTechicalProperties?.crateLifeCycleTest"
                  :label="t('寿命循环测试C率')"
              />
            </div>
          </InfoCard>

          <!-- 电池状态卡片 -->
          <InfoCard :title="t('电池状态')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.remainingCapacity?.value"
                  :unit="`%`"
                  :label="t('剩余容量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.numberOfFullCycles?.value"
                  :label="t('循环次数')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.stateOfCharge?.value"
                  :unit="`%`"
                  :label="t('当前SOC')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.capacityFade?.value"
                  :unit="`%`"
                  :label="t('容量衰减')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.powerFade"
                  :unit="`%`"
                  :label="t('功率衰减')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.remainingEnergy?.value"
                  :unit="`kWh`"
                  :label="t('剩余能量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.energyThroughput"
                  :unit="`kWh`"
                  :label="t('能量吞吐量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.capacityThroughput?.value"
                  :unit="`Ah`"
                  :label="t('容量吞吐量')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.currentSelfDischargingRate?.value"
                  :unit="`%/${t('天')}`"
                  :label="t('当前自放电率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.evolutionOfSelfDischarge"
                  :unit="`%`"
                  :label="t('自放电演变')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.roundTripEfficiencyFade"
                  :unit="`%`"
                  :label="t('往返效率衰减')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.roundTripEfficiencyat50PerCentCycleLife"
                  :unit="`%`"
                  :label="t('50%循环寿命时往返效率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.remainingRoundTripEnergyEfficiency?.value"
                  :unit="`%`"
                  :label="t('剩余往返能量效率')"
              />
              <InfoItem
                  :value="passportData.performanceData?.batteryCondition?.stateOfCertifiedEnergy?.value"
                  :unit="`%`"
                  :label="t('认证能量状态')"
              />
            </div>
          </InfoCard>

          <!-- 功率能力卡片 -->
          <InfoCard :title="t('功率能力')" v-if="false">
            <div class="mb-4">
              <h4 class="text-md font-medium text-gray-700 mb-2">{{ t('原始功率能力') }}</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <InfoItem
                    v-for="(power, index) in passportData.performanceData?.batteryTechicalProperties?.originalPowerCapability"
                    :key="index"
                    :label="`SoC: ${power.atSoC}%`"
                    :value="power.powerCapabilityAt"
                    :unit="`W`"
                />
              </div>
            </div>
            <div>
              <h4 class="text-md font-medium text-gray-700 mb-2">{{ t('剩余功率能力') }}</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <InfoItem
                    v-for="(power, index) in passportData.performanceData?.batteryCondition?.remainingPowerCapability"
                    :key="index"
                    :label="`SoC: ${power.atSoC}%`"
                    :value="power.powerCapabilityAt"
                    :unit="`W`"
                />
              </div>
            </div>
          </InfoCard>

          <!-- 内部电阻卡片 -->
          <InfoCard :title="t('内部电阻')" v-if="false">
            <div class="mb-4">
              <h4 class="text-md font-medium text-gray-700 mb-2">{{ t('初始内部电阻') }}</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <InfoItem
                    v-for="(resistance, index) in passportData.performanceData?.batteryTechicalProperties?.initialInternalResistance"
                    :key="index"
                    :label="`${t('组件')}: ${getLabelByValue(BatteryComponent, resistance.batteryComponent)}`"
                    :value="resistance.ohmicResistance"
                    :unit="`mΩ`"
                />
              </div>
            </div>
            <div>
              <h4 class="text-md font-medium text-gray-700 mb-2">{{ t('内部电阻增加') }}</h4>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <InfoItem
                    v-for="(resistance, index) in passportData.performanceData?.batteryCondition?.internalResistanceIncrease"
                    :key="index"
                    :label="`${t('组件')}: ${getLabelByValue(BatteryComponent, resistance.batteryComponent)}`"
                    :value="resistance.ohmicResistance"
                    :unit="`mΩ`"
                />
              </div>
            </div>
          </InfoCard>

          <!-- 温度条件卡片 -->
          <InfoCard :title="t('温度条件')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <InfoItem
                  :value="passportData.performanceData.batteryCondition.temperatureInformation.timeExtremeHighTemp"
                  :unit="`${t('小时')}`"
                  :label="t('极端高温时间')"
              />
              <InfoItem
                  :value="passportData.performanceData.batteryCondition.temperatureInformation.timeExtremeLowTemp"
                  :unit="`${t('小时')}`"
                  :label="t('极端低温时间')"
              />
              <InfoItem
                  :value="passportData.performanceData.batteryCondition.temperatureInformation.timeExtremeHighTempCharging"
                  :unit="`${t('小时')}`"
                  :label="t('充电时极端高温时间')"
              />
              <InfoItem
                  :value="passportData.performanceData.batteryCondition.temperatureInformation.timeExtremeLowTempCharging"
                  :unit="`${t('小时')}`"
                  :label="t('充电时极端低温时间')"
              />
            </div>
          </InfoCard>

          <!-- 负面事件卡片 -->
          <InfoCard
              v-if="false"
              :title="t('负面事件')">
            <div class="space-y-3">
              <div
                  v-for="(event, index) in passportData.performanceData.batteryCondition.negativeEvents"
                  :key="index"
                  class="bg-red-50 border border-red-200 rounded-lg p-4"
              >
                <div class="text-base font-medium text-red-800">{{ event.negativeEvent }}</div>
                <div class="text-xs text-red-600 mt-1">{{ t('更新于') }}: {{ formatDate(event.lastUpdate) }}</div>
              </div>
            </div>
          </InfoCard>

          <!-- 耐久性数据卡片 -->
          <InfoCard :title="t('耐久性数据')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :label="t('寿命参考测试')">
                <a
                    v-if="passportData.performanceData?.batteryTechicalProperties?.lifetimeReferenceTest"
                    :href="passportData.performanceData.batteryTechicalProperties.lifetimeReferenceTest"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看测试报告') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
            </div>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 碳足迹 -->
      <el-tab-pane class="space-y-6" :label="t('碳足迹')" v-if="false">
        <div class="space-y-6">
          <!-- 总体碳足迹卡片 -->
          <InfoCard :title="t('总体碳足迹')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :value="passportData.carbonFootprint?.batteryCarbonFootprint"
                        :unit="`kgCO₂e`"
                        :label="t('总碳排放')"/>
              <InfoItem :value="passportData.carbonFootprint?.carbonFootprintPerformanceClass" :label="t('性能等级')"/>
              <InfoItem :label="t('研究报告')">
                <a
                    v-if="passportData.carbonFootprint?.carbonFootprintStudy"
                    :href="passportData.carbonFootprint.carbonFootprintStudy"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看报告') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
            </div>
          </InfoCard>

          <!-- 生命周期阶段排放表格 -->
          <InfoCard :title="t('生命周期阶段排放')">
            <el-table
                :data="passportData.carbonFootprint?.carbonFootprintPerLifecycleStage"
                :header-cell-style="{ backgroundColor: '#f9fafb', color: '#374151' }"
                class="w-full"
            >
              <el-table-column :label="t('生命周期阶段')" min-width="150">
                <template #default="{row}">
                  {{ getLabelByValue(LifecycleStage, row.lifecycleStage) }}
                </template>
              </el-table-column>
              <el-table-column :label="t('碳排放(kg CO₂e)')" min-width="150" prop="carbonFootprint"/>
            </el-table>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 合规信息 -->
      <el-tab-pane class="space-y-6" :label="t('合规信息')">
        <div class="space-y-6">
          <!-- 合规信息卡片 -->
          <InfoCard :title="t('合规信息')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :label="t('符合性声明')">
                <a
                    v-if="passportData.labelsConformity?.declarationOfConformity"
                    :href="passportData.labelsConformity.declarationOfConformity"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看声明') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
              <InfoItem :label="t('测试报告结果')">
                <a
                    v-if="passportData.labelsConformity?.resultOfTestReport"
                    :href="passportData.labelsConformity.resultOfTestReport"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看报告') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
            </div>
          </InfoCard>

          <!-- 标签信息表格 -->
          <InfoCard :title="t('标签信息')">
            <el-table
                :data="passportData.labelsConformity?.labels"
                :header-cell-style="{ backgroundColor: '#f9fafb', color: '#374151' }"
                class="w-full"
            >
              <el-table-column :label="t('标签符号')" min-width="120">
                <template #default="{row}">
                  <img
                      v-if="row.labelingSymbol"
                      :src="row.labelingSymbol"
                      class="text-blue-600 hover:text-blue-700 hover:underline"
                       style="width: 3rem;height: 3rem"
                      target="_blank"
                  >
                  <span v-else class="text-gray-400">{{ t('未提供') }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="t('标签主题')" min-width="150">
                <template #default="{row}">
                  {{ getLabelByValue(LabelingSubject, row.labelingSubject) }}
                </template>
              </el-table-column>
              <el-table-column :label="t('标签含义')" min-width="300">
                <template #default="{row}">
                  <div v-if="row.labelingMeaning" class="text-sm">
                    {{ row.labelingMeaning[locale] || row.labelingMeaning['en'] }}
                  </div>
                  <span v-else class="text-gray-400">{{ t('未提供') }}</span>
                </template>
              </el-table-column>
            </el-table>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 供应链 -->
      <el-tab-pane class="space-y-6" :label="t('供应链')">
        <div class="space-y-6">
          <!-- 供应链信息卡片 -->
          <InfoCard :title="t('供应链信息')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :label="t('尽职调查报告')">
                <a
                    v-if="passportData.supplyChain?.supplyChainDueDiligenceReport"
                    :href="passportData.supplyChain.supplyChainDueDiligenceReport"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看报告') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
              <InfoItem :label="t('第三方保证')" v-if="false">
                <a
                    v-if="passportData.supplyChain?.thirdPartyAssurances"
                    :href="passportData.supplyChain.thirdPartyAssurances"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('查看保证') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
              <InfoItem :value="passportData.supplyChain?.supplyChainIndices" :label="t('供应链指数')"/>
            </div>
          </InfoCard>
        </div>
      </el-tab-pane>

      <!-- 循环性 -->
      <el-tab-pane class="space-y-6" :label="t('循环性')">
        <div class="space-y-6">
          <!-- 回收内容表格 -->
          <InfoCard :title="t('回收内容')" v-if="false">
            <el-table
                :data="passportData.circularityInfo?.recycledContent"
                :header-cell-style="{ backgroundColor: '#f9fafb', color: '#374151' }"
                class="w-full"
            >
              <el-table-column :label="t('材料')" min-width="150" prop="recycledMaterial"/>
              <el-table-column :label="t('消费前份额(%)')" min-width="150" prop="preConsumerShare"/>
              <el-table-column :label="t('消费后份额(%)')" min-width="150" prop="postConsumerShare"/>
            </el-table>
          </InfoCard>

          <!-- 安全措施卡片 -->
          <InfoCard :title="t('安全措施')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem
                  :value="passportData.circularityInfo?.safetyMeasures?.safetyInstructions"
                  :label="t('安全说明')"
              />
              <InfoItem :label="t('灭火剂')">
                {{
                  Array.isArray(passportData.circularityInfo?.safetyMeasures?.extinguishingAgent) ?
                      passportData.circularityInfo.safetyMeasures.extinguishingAgent.join(', ') : t('未提供')
                }}
              </InfoItem>
            </div>
          </InfoCard>

          <!-- 报废信息卡片 -->
          <InfoCard :title="t('报废信息')">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <InfoItem :label="t('废物预防')">
                <a
                    v-if="passportData.circularityInfo?.endOfLifeInformation?.wastePrevention"
                    :href="passportData.circularityInfo.endOfLifeInformation.wastePrevention"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('关于最终用户在废物预防中的角色信息') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
              <InfoItem :label="t('分类收集')">
                <a
                    v-if="passportData.circularityInfo?.endOfLifeInformation?.separateCollection"
                    :href="passportData.circularityInfo.endOfLifeInformation.separateCollection"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('关于最终用户在废电池分类收集中的角色信息') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
              <InfoItem :label="t('收集信息')">
                <a
                    v-if="passportData.circularityInfo?.endOfLifeInformation?.informationOnCollection"
                    :href="passportData.circularityInfo.endOfLifeInformation.informationOnCollection"
                    class="text-blue-600 hover:text-blue-700 hover:underline"
                    target="_blank"
                >
                  {{ t('关于废电池分类收集、回收、再利用操作的信息') }} →
                </a>
                <span v-else class="text-gray-400">{{ t('未提供') }}</span>
              </InfoItem>
            </div>
          </InfoCard>

          <!-- 拆卸信息卡片 -->
          <InfoCard :title="t('拆卸和移除信息')" v-if="false">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <div
                  v-for="(doc, index) in passportData.circularityInfo?.dismantlingAndRemovalInformation"
                  :key="index"
                  class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
              >
                <InfoItem
                    :value="getLabelByValue(DocumentType, doc.documentType)"
                    :label="t('文档类型')"
                />
                <div class="text-sm">
                  <a
                      :href="doc.documentURL"
                      class="text-blue-600 hover:text-blue-700 hover:underline"
                      target="_blank"
                  >
                    {{ t('查看文档') }} →
                  </a>
                </div>
                <div class="text-xs text-gray-500 mt-1">{{ t('格式') }}: {{ doc.mimeType }}</div>
              </div>
            </div>
          </InfoCard>

          <!-- 备件来源卡片 -->
          <InfoCard :title="t('备件来源')" v-if="false">
            <div v-if="passportData.circularityInfo?.sparePartSources?.length" class="space-y-4">
              <div
                  v-for="(supplier, index) in passportData.circularityInfo.sparePartSources"
                  :key="index"
                  class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
              >
                <div class="flex items-start justify-between mb-3">
                  <div>
                    <h4 class="text-lg font-semibold text-gray-900">{{ supplier.nameOfSupplier }}</h4>
                    <p class="text-sm text-gray-600">
                      {{ supplier.addressOfSupplier?.streetAddress }}, {{ supplier.addressOfSupplier?.addressCountry }}
                    </p>
                  </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                  <InfoItem :value="supplier.addressOfSupplier?.postalCode" inline :label="t('邮编')"/>
                  <InfoItem :label="t('邮箱')">
                    <a
                        :href="`mailto:${supplier.emailAddressOfSupplier}`"
                        :title="supplier.emailAddressOfSupplier"
                        class="text-blue-600 hover:underline truncate inline-block max-w-xs align-middle"
                    >
                      {{ supplier.emailAddressOfSupplier }}
                    </a>
                  </InfoItem>
                  <InfoItem class="md:col-span-2" :label="t('网站')">
                    <a
                        :href="supplier.supplierWebAddress"
                        :title="supplier.supplierWebAddress"
                        class="text-blue-600 hover:underline truncate inline-block max-w-xs align-middle"
                        target="_blank"
                    >
                      {{ supplier.supplierWebAddress }}
                    </a>
                  </InfoItem>
                </div>
                <div class="mt-3 pt-3 border-t border-gray-100">
                  <div class="text-sm text-gray-500 mb-2">{{ t('提供的组件') }}:</div>
                  <div class="flex flex-wrap gap-2">
                    <span
                        v-for="(component, compIndex) in supplier.components"
                        :key="compIndex"
                        class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800"
                    >
                      {{ component.partName }} ({{ component.partNumber }})
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="text-center text-gray-500 py-8">
              {{ t('暂无备件来源信息') }}
            </div>
          </InfoCard>

          <!-- 可再生内容卡片 -->
          <InfoCard :title="t('可再生材料含量')" v-if="false">
            <InfoItem :value="passportData.circularityInfo?.renewableContent" :unit="`%`"
                      :label="t('可再生材料含量份额')"/>
          </InfoCard>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import batteryPassportApi from '@/api/batteryPassport'
import QrcodeVue from 'qrcode.vue'
import {ElMessage} from "element-plus";
import {
  BatteryCategory,
  BatteryComponent,
  BatteryStatus,
  DocumentType,
  LabelingSubject,
  LifecycleStage
} from "@/api/_const.js";
import {getLabelByValue} from "@/utils/utils.js";

import InfoCard from './components/InfoCard.vue'
import InfoItem from './components/InfoItem.vue'
import {useI18n} from "vue-i18n";
import {formatDate} from '@/utils/date'

const {locale, t} = useI18n()

let router = useRouter()
const route = useRoute()

const passportData = ref({})
const loading = ref(true)
const qrValue = ref(window.location.origin + "/public/phone/" + route.params.id)
const qrValue2 = ref("/public/phone/" + route.params.id)
const isPublic = ref(route.path.includes("/public/phone"))
const goBack = () => router.go(-1)
const publish = async () => {
  const res = await batteryPassportApi.publishBattery({id: passportData.value.id})
  if (res.code !== 200) {
    ElMessage.error(res.message)
    return
  }
  ElMessage.success(t("发布成功"))
  await fetchData()
}
const fetchData = async () => {
  loading.value = true
  try {
    const res = await batteryPassportApi.getBatteryPassportById(route.params.id)
    if (res.code !== 200) {
      console.error('获取电池护照详情失败:', res.message)
      return
    }
    passportData.value = res.data
  } catch (error) {
  } finally {
    loading.value = false
  }
}



const goTo = (path) => {
  router.push(path);
}
onMounted(() => {
  fetchData()
})
</script>